.mySlides {display: none;}
	img {vertical-align: middle;}

	/* Slideshow container */
	.slideshow-container {
	  max-width: 60%;
	  position: relative;
	  margin: auto;
	}

	/* Next & previous buttons */
	.prev, .next {
	  background-color: rgb(0 0 0 / 10%);
	  backdrop-filter: blur(10px);

	  cursor: pointer;
	  position: absolute;
	  top: 40%;
	  width: auto;
	  padding: 50px 25px;


	  margin-top: -22px;
	  color: white;
	  font-size: 18px;
	  transition: 0.6s ease;
	  border-radius: 0 0.5em 0.5em 0;
	}

	/* Position the "next button" to the right */
	.next {
	  right: 0;
	  border-radius: 0.5em 0 0 0.5em;
	}

	/* On hover, add a black background color with a little bit see-through */
	.prev:hover, .next:hover {
	 background-color: rgb(0 0 0 / 30%);
	 backdrop-filter: blur(10px);

	}

	/* Caption text */
	.text {
	  color: black;
	  font-size: 15px;
	  padding: 8px 12px;
	  position: absolute;
	  bottom: 8px;
	  width: 100%;
	  text-align: center;
	}

	/* Number text (1/3 etc) */
	.numbertext {
	background: #00000026;
	  color: white;
	  font-size: 12px;
	  padding: 8px 12px;
	  position: absolute;
	  top: 0;
	  backdrop-filter: blur(10px);
	  border-radius:0 0 10px 0;
	}

	/* The dots/bullets/indicators */
	.dot {
	  cursor: pointer;
	  height: 20px;
	  width: 20px;
	  margin: 0 2px;
	  background-color: #bbb;
	  border-radius: 50%;
	  display: inline-block;
	  transition: background-color 0.6s ease;
	}

	.active, .dot:hover {
	  background-color: #717171;
	}

	/* Fading animation */
	.fade {
	  animation-name: fade;
	  animation-duration: s;
	}

	img.caros{
		width:100%;

	}

	@keyframes fade {
	  from {opacity: .4} 
	  to {opacity: 1}
	}

	/* On smaller screens, decrease text size */
	@media only screen and (max-width: 768px) {
		.slideshow-container {
			max-width: 100%;
		  }
		  
	  .prev, .next,.text {font-size: 11px}

	}